<template>
  <div>
    <!-- App.vue是父组件 -->
   <HeaderVue :a='a'></HeaderVue>   <!-- 子组件 -->
   <SwiperVue :arr='arr'></SwiperVue>   <!-- 子组件 -->
   <FooterVue @changeStr="changeBtn"></FooterVue>   <!-- 子组件 -->
   

  <A />
  <B />

  </div>
</template>

<script>
import HeaderVue from "./components/Header.vue";
import SwiperVue from "./components/Swiper.vue";
import FooterVue from "./components/Footer.vue";

import A from "./components/A.vue";
import B from "./components/B.vue";

export default{
  data(){
    return {
      a:1,
      arr:['a','b','c']
    }
  },
  components:{
    HeaderVue,
    SwiperVue,
    FooterVue,
    A,
    B
  },
  methods:{
    changeBtn(s){
      console.log(s);
    }
  }
}
</script>

<style>
header{
  background: red;
}
</style>
